<template>
  <div class="enroll">
    <van-cell-group>
      <van-field
        :value="formData.realname"
        required
        input-align="right"
        id="realname"
        label="姓名"
        clearable
        placeholder="请输入姓名"
        :error="!!errorMessage.realname"
        @blur="onChangeInput"
        @click-icon="onClickIcon"
      />

      <van-field
        :value="formData.idcardno"
        type="idcard"
        required
        clearable
        maxlength="18"
        input-align="right"
        id="idcardno"
        label="身份证号"
        placeholder="请输入身份证号"
        :error="!!errorMessage.idcardno"
        @blur="onChangeInput"
      />

      <van-field
        :value="formData.mobile"
        type="number"
        required
        clearable
        input-align="right"
        id="mobile"
        label="手机号"
        placeholder="请输入手机号"
        :error="!!errorMessage.mobile"
        @blur="onChangeInput"
      />
      <van-field
        :value="formData.lntsno"
        input-align="right"
        id="lntsno"
        label="注册号"
        clearable
        placeholder="请输入成员注册号"
        :error="!!errorMessage.lntsno"
        @blur="onChangeInput"
        @click-icon="onClickIcon"
      />
      <van-field
        :value="formData.cardno"
        input-align="right"
        id="cardno"
        label="会员卡号"
        clearable
        placeholder="请输入会员卡号"
        :error="!!errorMessage.cardno"
        @blur="onChangeInput"
        @click-icon="onClickIcon"
      />
      <single-picker
        required
        :value="formData.paymode"
        :data="paymodes"
        id="paymode"
        label="缴费方式"
        placeholder="请选择缴费方式"
        :error="!!errorMessage.paymode"
        @change="onCheckedPaymode"
      />
    </van-cell-group>
    <page-action>
      <van-button
        type="info"
        @click="onSubmit"
      >提交</van-button>
    </page-action>
  </div>
</template>

<script>
import { postEnrollFormApi } from '@/api'
import SinglePicker from '@/components/form/singlePicker'
import PageAction from '@/components/action'
export default {
  components: {
    SinglePicker,
    PageAction
  },

  data () {
    return {
      id: 1,
      paymodes: [
        '微信',
        '支付宝'
      ],
      errorFocusAttribute: '',
      errorMessage: {
        realname: '',
        idcardno: '',
        mobile: '',
        lntsno: '',
        cardno: '',
        paymode: ''
      },
      fieldOptions: {
        realname: {
          error: false,
          errorMessage: '请输入姓名信息',
          required: true
        },
        idcardno: {
          error: false,
          errorMessage: '请输入您的身份证号码',
          required: true
        },
        mobile: {
          error: false,
          errorMessage: '请输入您的手机号',
          required: true
        },
        lntsno: {
          error: false,
          errorMessage: '请输入会员注册号',
          callback: (value, data) => {
            if (!data.cardno && !value) {
              return false
            } else {
              return true
            }
          }
        },
        cardno: {
          error: false,
          errorMessage: '请输入会员卡号',
          callback: (value, data) => {
            if (!data.lntsno && !value) {
              return false
            } else {
              return true
            }
          }
        },
        paymode: {
          error: false,
          errorMessage: '请选择缴费方式',
          required: true
        }
      },
      formData: {
        realname: '',
        idcardno: '',
        mobile: '',
        lntsno: '',
        cardno: '',
        paymode: ''
      }
    }
  },
  onLoad (option) {
    if (option.id) {
      this.id = option.id
    }
  },
  watch: {
    // formData: {
    //   handler (now, old) {
    //     console.log('当前表单数据', now)
    //   },
    //   deep: true,
    //   immediate: true
    // }
  },
  created () {
    console.log('entryform created')
  },
  methods: {
    onCheckedPaymode (data) {
      console.log('选择的缴费方式', data)
      this.formData.paymode = data
    },
    onCheckedPolitics (data) {
      console.log('选择的政治面貌', data)
      this.formData.politic = data
    },
    onChangeInput (e) {
      const key = e.mp.target.id
      // console.log(key, this.errorFocusAttribute)
      // if (key !== this.errorFocusAttribute) {
      //   this.errorFocusAttribute = key
      // }
      const value = e.mp.detail.value
      console.log(e.mp)
      if (Object.prototype.hasOwnProperty.call(this.formData, key)) {
        this.formData[key] = value
      }
    },
    validateAttributes () {
      let hasError = false
      const data = this.formData
      let options = this.fieldOptions
      for (let attribute in data) {
        if (Object.prototype.hasOwnProperty.call(options, attribute)) {
          let fieldRule = options[attribute]
          if (this.validateAttribute(fieldRule, attribute)) {
            fieldRule.error = false
            this.errorMessage[attribute] = ''
          } else {
            fieldRule.error = true
            this.errorMessage[attribute] = fieldRule.errorMessage
            if (!hasError) {
              hasError = true
              this.errorFocusAttribute = attribute
            }
            break
          }
        }
      }
      return !hasError
    },
    validateAttribute (rule, name) {
      const attributeData = this.formData[name]
      if (rule.required && !attributeData) {
        return false
      } else if (rule.callback) {
        const validated = rule.callback(attributeData, this.formData)
        console.log('callback validated', validated)
        return validated
      } else {
        return true
      }
    },
    onSubmit () {
      if (!this.validateAttributes()) {
        wx.showToast({
          title: this.errorMessage[this.errorFocusAttribute],
          icon: 'none',
          duration: 2000
        })
        return
      }
      postEnrollFormApi(this.id, this.formData).then(res => {
        wx.showToast({
          title: '提交成功',
          icon: 'none',
          duration: 2000
        })
        this.pushNativelink({
          name: 'pages/activity/view/main',
          params: {
            id: this.id
          }
        })
      })
      console.log(this.formData)
    }
  }
}
</script>

<style lang="less">
.form-action {
  padding: 30px 15px 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  .van-button {
    padding: 0 20px;
    min-width: 200px;
    height: 40px !important;
  }
}
.enroll {
  .van-cell {
    padding: 15px !important;
    &__title {
      flex: none;
    }
    &-group {
      &__title {
        padding: 20px 15px 10px !important;
      }
    }
  }
  .textarea-cell {
    .van-cell {
      flex-direction: column;
      &__value {
        margin-top: 10px;
      }
    }
    &__input {
      white-space: nowrap;
    }
  }
}
</style>
